<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏房间</title>
</head>
<style>
    body
    {
        display: grid;
        align-items: center;
        padding: 20px;
        margin: 0;
        background:linear-gradient(to right,rgb(58, 55, 55),rgb(255, 255, 255),rgb(58, 55, 55));
    }

    .container
    {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 20px;
        min-height: 300px;
    }

    .chess_area
    {
        display: grid;
        justify-content:center ;
        gap: 20px;
    }

    .status
    {
        font-size: 20px;
    }

    .is_me
    {
        font-size: 20px;
    }

    .board
    {
        position: relative;
        top: 30px;
        left: 100px;
        z-index: 1;
    }

    .back
    {
        width: 200px;
        height: 60px; 
        font-size: 20px;
        color:white;
        background-color:black;
        border: 0px;
        border-radius: 10px;
        display: none;
        position: relative;
        top: 750px;
        left: 50px;
    }

    .chat_area
    {
        width: 400px;
        height: 300px; 
        font-size: 20px;
        border: 5px solid rgb(228, 217, 217);
        box-sizing: border-box;
        border-radius: 10px;
        background: rgb(170, 84, 84);
        position: relative;
        top: 600px;
    }

    .message
    {
        position: relative;
        top: 165px;
        left: 10px;
    }

</style>
<body>
    <div class="container" id="container">
    <div class="left" id="left">
    <button class="back" id="back">返回大厅</button>
    </div>
    <div class="chess_area" id="chess_area">
    <h1 class="status" id="status"></h1>
    <h1 class="is_me" id="is_me"></h1>
    <canvas class="board" id="board" width="750px" height="750px"></canvas>
    </div>
    <div class="right" id="right">
    <div class="chat_area" id="chat_area">
        <div class="show" id="show">
            <p class="self_msg" id="self_msg"></p><br>
            <p class="peer_msg" id="peer_msg"></p><br>
        </div>
        <div class="message" id="message">
            <input type="text" class="msg" id="msg" style="width: 300px;">
            <button class="send" id="send">发送</button>
        </div>
    </div>
    </div>
    </div>
<script>
    let chess = document.getElementById('board');
    let context = chess.getContext('2d');
    const BOARD_ROW_AND_COL=15;
    let chessBoard=[];

    var ws_url="ws://47.101.42.147:8080/room";
    var ws_hdl=new WebSocket(ws_url);

    var room_info=null;
    var is_me;
    var is_white;

    window.onbeforeunload = function() {
        ws_hdl.close();
    }

    function initgame()
    {
        initboard();
        let back_groud=new Image();
        back_groud.src="/image/backgroud.jpg";
        back_groud.onload = function(){
            context.drawImage(back_groud,0, 0, 750, 750);
            drawChessBoard();
        }
    }

    function initboard()
    {
        for(let i=0;i<BOARD_ROW_AND_COL;i++)
        {
            chessBoard[i]=[];
            for(let j=0;j<BOARD_ROW_AND_COL;j++)
            {
                chessBoard[i][j]=0;
            }
        }
    }

    function drawChessBoard() 
    {
        context.strokeStyle = "#BFBFBF";
        for (let i = 0; i < BOARD_ROW_AND_COL; i++) 
        {
            //横向的线条
            context.moveTo(25 + i * 50, 25);
            context.lineTo(25 + i * 50, 725); 
            context.stroke();
            //纵向的线条
            context.moveTo(25, 25 + i * 50);
            context.lineTo(725, 25 + i * 50); 
            context.stroke();
        }
        // 还可以优化棋盘
    }

    function onestep()
    {
        for(let i=0;i<BOARD_ROW_AND_COL;i++)
        {
            for(let j=0;j<BOARD_ROW_AND_COL;j++)
            {
                if(chessBoard[i][j] != 0)
                {
                    context.beginPath();
                    context.arc(25 + j * 50, 25 + i * 50, 13, 0, 2 * Math.PI);
                    context.closePath();
                    var chessman = context.createRadialGradient(
                        25 + j * 50 + 2,
                        25 + i * 50 - 2,
                        13,
                        25 + j * 50 + 2,
                        25 + i * 50 - 2,
                        0);

                    if (chessBoard[i][j] == 2) {
                        chessman.addColorStop(0, "#0A0A0A");
                        chessman.addColorStop(1, "#636766");
                    }
                    else if (chessBoard[i][j] == 1) {
                        chessman.addColorStop(0, "#D1D1D1");
                        chessman.addColorStop(1, "#F9F9F9");
                    }
                    context.fillStyle = chessman;
                    context.fill();
                }
            }
        }

    }

    function send_chess(row,col)
    {
        var req_json={
            optype:"put_chess",
            room_id: room_info.room_id,
            uid:room_info.uid,
            row:row,
            col:col
        };
        ws_hdl.send(JSON.stringify(req_json));
    }

    board.onclick=function(event)
    {
        if(!is_me)
        {
            document.getElementById("status").textContent="等待对方走棋";
            return;
        }

        let x=event.offsetX;
        let y=event.offsetY;
        let col=Math.floor(x/50);
        let row=Math.floor(y/50);
        if(chessBoard[row][col]!=0)
        {
            document.getElementById("status").textContent="当前位置已有棋子!";
            return;
        }
        
        send_chess(row,col);
    }
 
    ws_hdl.onopen=function()
    {

    }

    ws_hdl.onclose=function()
    {

    }

    ws_hdl.onerror=function()
    {
        
    }

    function set_screen(me)
    {
        if(me)
        {
            document.getElementById("is_me").textContent="轮到己方行动...";
        }
        else
        {
            document.getElementById("is_me").textContent="轮到对方行动...";
        }
    }

    ws_hdl.onmessage=function(event)
    {
        var resp_json=JSON.parse(event.data);
        if(resp_json.optype=="room_ready")
        {
            room_info=resp_json;
            // 黑棋先手
            is_me=(room_info.uid==room_info.white_uid?false:true);
            initgame();
            set_screen(is_me);
        }
        else if(resp_json.optype=="put_chess")
        {
            if(resp_json.result==false)
            {
                document.getElementById("status").textContent=resp_json.reason;
            }

            is_me=(resp_json.uid==room_info.uid?false:true);
            is_white=(resp_json.uid==room_info.white_uid?true:false);
            set_screen(is_me);

            if (resp_json.row != -1 && resp_json.col != -1)
            {
                if(is_white)chessBoard[resp_json.row][resp_json.col]=1;
                else chessBoard[resp_json.row][resp_json.col]=2;
                onestep();
            }

            if(resp_json.winner==room_info.white_uid||resp_json.winner==room_info.black_uid)
            {
                if(room_info.uid==resp_json.winner)
                {
                    document.getElementById("status").textContent=resp_json.reason;
                }
                else
                {
                    document.getElementById("status").textContent="你输了";
                }
                document.getElementById("back").style.display="block";
                document.getElementById("back").onclick=function(){
                    ws_hdl.close();
                    window.location.href = '/game_hall.html'; 
                }
            }
            else
            {
                return;
            }
        }
        else if(resp_json.optype=="chat")
        {
            if(room_info.uid==resp_json.uid)
            {
                document.getElementById("self_msg").textContent=resp_json.message;
            }
            else
            {
                document.getElementById("peer_msg").textContent=resp_json.message;
            }
        }
    }

    document.getElementById("send").onclick=function(){
        var req_msg={
            optype:"chat",
            room_id:room_info.room_id,
            uid:room_info.uid,
            message:document.getElementById("msg").value
        };
        ws_hdl.send(JSON.stringify(req_msg));
        document.getElementById("msg").value="";
    }

</script>
</body>
</html>